import { GlobalData } from '/store/state'
import { $event } from '/utils'

Component({
  properties: {
    back: { type: Boolean, value: false },
    showBorder: { type: Boolean, value: false },
    title: { type: String, value: '' },
    color: { type: String, value: '' },
    transparent: { type: Boolean, value: false },
    iconwidth: { type: Number, value: 0 },
    left: { type: Boolean, value: false },
  },
  data: {
    titleStyle: '',
    top: 0,
    height: 0,
  },
  observers: {
    left: function () {
      this.getPosition()
    },
  },
  lifetimes: {
    attached() {
      // wx.nextTick(() => {
      //   const position = GlobalData.menuRect
      //   const { height, top, width, right, left } = position
      //   const pdRight = GlobalData.clientWidth - left
      //   this.setData({
      //     width,
      //     height,
      //     right,
      //     top,
      //     headerStyle: `height: ${height}px; padding-top: ${top}px;padding-right:${pdRight +
      //       this.data.iconwidth}px;`,
      //   })
      // })
      $event.on('after:boot', this, () => {
        this.getPosition()
      })
      this.getPosition()
    },
  },
  methods: {
    getPosition() {
      const position = GlobalData.menuRect
      const { height, top, width, right, left } = position
      const pdRight = GlobalData.clientWidth - left
      this.setData({
        width,
        height,
        right,
        top,
        headerStyle: `height: ${
          this.data.left ? '' : height
        }px; padding-top: ${top}px;padding-right:${pdRight + this.data.iconwidth}px;padding-left:${
          this.data.left ? width / 2 : 0
        }px;`,
      })
    },
  },
})
